<template>
  <van-nav-bar title="商家详情">
    <template #right>
      <van-icon name="star-o" size="18" color="#1E1E1E" />
    </template>
    <template #left>
      <van-icon
        name="arrow-left"
        size="18"
        color="#1E1E1E"
        @click="$router.push({ name: 'foodlist' })"
      />
    </template>
  </van-nav-bar>
  <div class="imgbox2">
    <img :src="foodifn.imgUrl" />
  </div>
  <div class="fdtitle">
    <p class="pp">{{ foodifn.title }}</p>
    <van-rate :size="25" v-model="foodifn.score" readonly allow-half /><span
      class="pf"
      >{{ foodifn.score }}</span
    >
    <van-divider />
    <div class="iconbox">
      <van-icon name="location-o" /><span>{{ foodifn.areaName }}</span
      ><van-icon name="phone-o" />
    </div>
    <van-divider />

    <div class="pricebox">团购套餐</div>

    <van-card
      :price="foodifn.avgPrice"
      desc="超级实惠"
      title="招牌套餐"
      :thumb="foodifn.imgUrl"
    />
    <van-card
      :price="foodifn.lowPrice"
      desc="超级实惠"
      title="招牌套餐"
      :thumb="foodifn.imgUrl"
    />
    <van-divider />

    <p class="more">查看更多评价>></p>
    <van-divider />

    <div class="pj">
      <img
        src="https://tse2-mm.cn.bing.net/th/id/OIP-C.0Hv9_vTFt_ydAVS94YHsAwAAAA?w=186&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7"
        alt=""
      />
      <div>
        超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~
      </div>
    </div>
    <van-divider />

    <div class="pj">
      <img
        src="https://tse2-mm.cn.bing.net/th/id/OIP-C.0Hv9_vTFt_ydAVS94YHsAwAAAA?w=186&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7"
        alt=""
      />
      <div>
        超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~
      </div>
    </div>
    <van-divider />

    <div class="pj">
      <img
        src="https://tse2-mm.cn.bing.net/th/id/OIP-C.0Hv9_vTFt_ydAVS94YHsAwAAAA?w=186&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7"
        alt=""
      />
      <div>
        超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~
      </div>
    </div>
    <van-divider />

    <div class="pj">
      <img
        src="https://tse2-mm.cn.bing.net/th/id/OIP-C.0Hv9_vTFt_ydAVS94YHsAwAAAA?w=186&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7"
        alt=""
      />
      <div>
        超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~超级好吃！！下次还会来呦~~~
      </div>
    </div>
    <van-divider />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { mapState } from 'vuex'
export default defineComponent({
  data() {
    return {
      value: 1.1,
      foodifn: ' '
    }
  },
  computed: {
    ...mapState(['homeData'])
  },
  created() {
    this.foodifn = this.homeData.detailData
    console.log(this.foodifn)
  },
  methods: {}
})
</script>

<style lang="scss" scoped>
.van-nav-bar {
  background-color: #ffd614;
}
.imgbox2 img {
  height: 3rem;
  width: 100%;
}
.fdtitle {
  padding-left: 0.1rem;
  .pp {
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0.2rem;
  }
  .pf {
    font-size: 0.2rem;
    display: block;
    float: right;
    padding-right: 0.8rem;
  }
}
.van-card {
  background-color: #fff;
  padding-left: 0;
}
.iconbox {
  height: 0.8rem;
  display: flex;
  align-items: center;
  span {
    width: 2rem;
    font-size: 0.2rem;
  }
}
.van-icon {
  font-size: 0.3rem;
  padding: 0 0.2rem 0 0;
}
.pj {
  display: flex;
  align-items: center;
  margin-bottom: 0.1rem;
  img {
    height: 0.8rem;
    border-radius: 50%;
  }
  div {
    font-size: 0.16rem;
  }
}
.more {
  text-align: right;
  font-size: 0.2rem;
  height: 0.3rem;
  line-height: 0.3rem;
  padding-right: 0.2rem;
}
</style>
